<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-语法速通'"></Breadcrumb>
        <RouterTabs :list="routerList" :current="0"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="title">
              <text>{{ grammarObject.conceptName }}</text>
            </view>
            <view class="section">
              <view class="video">
                <video
                  :src="grammarObject.video"
                  controls
                  object-fit="fill"
                ></video>
              </view>
              <view class="info">
                <view class="point">
                  <text style="font-weight: bold">学习重点：</text>
                  <text>
                    {{ grammarItem.learningPoints }}
                  </text>
                </view>
                <view class="button" @click="startLearning()">
                  <view class="button_content">
                    <text>练一练</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="text" v-html="grammarObject.content"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getConceptById } from "@/api/grammar";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "语法框图",
          url: "pages/grammar/grammarDiagram",
        },
        {
          name: "自主组卷",
          url: "pages/grammar/grammarPaper",
        },
        {
          name: "错题本",
          url: "pages/grammar/grammarBook",
        },
      ],
      conceptId: "",
      grammarObject: {},
      grammarItem: {},
    };
  },
  onLoad(option) {
    this.conceptId = option.conceptId;
    this.init();
  },
  methods: {
    init() {
      let params = {
        conceptId: this.conceptId,
      };
      getConceptById(params).then((res) => {
        this.grammarObject = res.data;
        this.grammarItem = this.grammarObject.item;
      });
    },
    startLearning() {
      uni.navigateTo({
        url: `/pages/grammar/grammarDiagramWord?conceptId=${this.conceptId}`,
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./grammarDiagramDetail";
</style>
